import { FC } from 'react';
import { Button, message, Modal } from 'antd';
import { TaskParams } from '@/types/task';
import SvgIcon from '@/components/svg-icon/SvgIcon';
import styles from '../../../pages/miner/minerModal.module.less';
import { fetchCommit } from '@/service/commit';

interface IGroupMoveModal {
  visible: boolean;
  setVisible: (flag: boolean) => void;
  setUseGroupConfigModalVisible: (flag: boolean) => void;
  paramsRef: React.MutableRefObject<TaskParams | undefined>;
  mutateMiner: () => void;
}

const GroupMoveModal: FC<IGroupMoveModal> = (props) => {
  const { paramsRef, setUseGroupConfigModalVisible, mutateMiner } = props;
  const line2Text = `您所选的${paramsRef.current?.miners.length}个矿机将被移动到"${paramsRef.current?.name}"，是否确认操作？`;

  const handleMove = () => {
    fetchCommit(102, {
      gid: paramsRef.current?.gid,
      monitor: paramsRef.current?.monitor,
      miners: paramsRef.current?.miners,
    })
      .then((res) => {
        props.setVisible(false);
        if (res.data.code === 0) {
          setUseGroupConfigModalVisible(true);
          message.success('指令下发成功');
        }
      })
      .finally(() => {
        mutateMiner();
      });
  };
  return (
    <Modal
      title={null}
      centered
      visible={props.visible}
      closable={false}
      footer={null}
    >
      <div
        className={`flex flex-col ai-center text-center ${styles.groupModalWrap}`}
      >
        <SvgIcon symbol="icon-wenhao" color="var(--primary-color)" size={40} />
        <p className={styles.mainText}>{line2Text}</p>
        <p className={styles.line2Text}>
          矿机被移动到新分组后，用户可以选择是否直接应用新的分组配置和分组超频。
        </p>
      </div>
      <div className={styles.groupModalBtnWrap}>
        <Button block type="primary" onClick={() => handleMove()}>
          确定
        </Button>
        <Button block onClick={() => props.setVisible(false)}>
          取消
        </Button>
      </div>
    </Modal>
  );
};

export default GroupMoveModal;
